# Tabs

<Subtitle>A component for toggling between related panels on the same page.</Subtitle>

<Meta
  name="description"
  content="A high-quality, unstyled React tabs component for toggling between related panels on the same page."
/>

import { DemoTabsHero } from './demos/hero';

<DemoTabsHero />

## Anatomy

Import the component and assemble its parts:

```jsx title="Anatomy"
import { Tabs } from '@base-ui-components/react/tabs';

<Tabs.Root>
  <Tabs.List>
    <Tabs.Tab />
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.Panel />
</Tabs.Root>;
```

## API reference

<Reference component="Tabs" parts="Root, List, Tab, Indicator, Panel" />
